<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js对象和jq对象</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="js" id="b1">
<input type="button" value="jq" id="b2">


<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //jq中动态给元素添加事件(动态绑定事件)
    $("#b1").click(function () {
        //得到的是js对象,表示文本框
        // let i = document.querySelector("#i1");
        // alert(i.value);

        //得到的是jq对象
        let $i1 = $("#i1");
        alert($i1.val());
        //js对象和jq对象是两种不同的对象,不能混着调用彼此的方法

        //得到的是js对象,表示文本框
        // let js = document.querySelector("#i1");
        //将js对象转成jq对象
        // let jq = $(js);
        // alert(jq.val());

        //得到的是js对象,表示文本框
        let js = document.querySelector("#i1");
        //将js对象转成jq对象
        let jq = $(js);
        alert(jq.val());
    })
    $("#b2").click(function () {
        let $jq = $("#i1");
        //把jq对象转成js对象,jq对象本质是一个数组,数组里面装的就是js对象
        let js = jq[0];
        alert(js.value);
    })
</script>
</body>
</html>